<!doctype html>
<html ng-app>
<head>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>



    <script src="../../../src/core/PrivateScope.js"></script>
    <script src="../../../src/core/Utility.js"></script>
    <script src="../../../src/core/Deferred.js"></script>
    <script src="../../../src/core/AttachedData.js"></script>
    <script src="../../../src/core/DataObserver.js"></script>
    <script src="../../../src/core/ArrayMonitor.js"></script>
    <script src="../../../src/core/GlobalSymbolHelper.js"></script>
    <script src="../../../src/core/OptionParser.js"></script>
    <script src="../../../src/core/KnotManager.js"></script>
    <script src="../../../src/core/CBSLoader.js"></script>
    <script src="../../../src/core/HTMLAPProvider.js"></script>
    <script src="../../../src/core/HTMLKnotBuilder.js"></script>
    <script src="../../../src/core/AddonHTMLAPProvider.js"></script>
    <script src="../../../src/core/WindowHashStatus.js"></script>
    <script src="../../../src/core/KnotInterface.js"></script>

    <!--<script src="../../src/debugger/knot.debug.js"></script>-->


    <link rel="stylesheet" href="../pfTest.css">
    <script type="text/cbs">

#knotList{
    foreach: /knotModel.dataList;

    -> >div{
        className: isCompleted>{return value?"completed":"";}
    };
    -> span:first-child{
        text = text;
    };
    -> span:last-child{
        text: value;
    }
}

    </script>

    <script type="text/javascript">
        window.knotModel={};

        function generateData(){
            var res=  [];
            for(var i=0; i<window.parent.calledByTestTarget.getItemNumber(); i++){
                res.push({
                    text: "To do item " + i,
                    value:Math.floor( Math.random()*10000),
                    isCompleted:false});
            }
            return res;
        }

        function runTest(callback){
            var start = Date.now();
            callback();
            return Math.round((Date.now() -start));
        }

        var _isCompleted = false;
        function changeValue(){
            _isCompleted = !_isCompleted;
            var arr = window.knotModel.dataList;

            for(var i=0; i<arr.length; i++){
                arr[i].isCompleted = _isCompleted;
                arr[i].value = Math.floor(Math.random()*10000);
            }
        }

        function testChangeValue(onFinish){
            var setCount = 0;
            var totalCost = 0;
            var func = function(){
                totalCost += runTest(changeValue);
                setCount ++;
                if(setCount < 10){
                    setTimeout(func, 500);
                }
                else{
                    onFinish(totalCost);
                }
            };
            setTimeout(func, 500);
        }

        function doKnotTest(v, onFinished, batch) {
            var cost = runTest(function(){
                if(batch){
                    window.knotModel.dataList = v;
                }
                else{
                    window.knotModel.dataList = [];
                    for (var i = 0; i < v.length; i++) {
                        window.knotModel.dataList.push(v[i]);
                    }
                }
            });
            window.parent.calledByTestTarget.getCurrentTestResultObj().create = cost;

            testChangeValue(function(totalCost){
                window.parent.calledByTestTarget.getCurrentTestResultObj().setValue = totalCost;

                cost = runTest(function(){
                    if(batch){
                        window.knotModel.dataList = [];
                    }
                    else{
                        while(window.knotModel.dataList.length > 0){
                            window.knotModel.dataList.pop();
                        }
                        //window.knotModel.dataList.splice(0, window.knotModel.dataList.length);
                    }
                });

                window.parent.calledByTestTarget.getCurrentTestResultObj().remove = cost;
                onFinished();
            });
        }

        Knot.ready(function(){
            setTimeout(function(){
                doKnotTest(generateData(), function(){
                    window.parent.calledByTestTarget.notifyTestFinish();
                }, window.parent.calledByTestTarget.getCurrentTest() === "knotjsBatch")
            }, 500);
        });
    </script>
</head>
<body>

<div class="list" id="knotList">
    <div knot-template class="toDoItem"><span></span><span></span></div>
</div>

</body>
</html>